<template>
	<div class="pre-order-home">
		<div class="pre-item">
			<i class="picon-pre" @click="preDate"></i>
			<ul class="list-date">
				<li :class="{ 'active': activeIndex == index }" @click="changeIndex(index)"
					v-for="(item, index) in weekList" :key="index">
					<p>{{ format(item, 'd') }}</p>
					<h5>{{ format(item) }}</h5>
				</li>
			</ul>
			<i class="picon-next" @click="nextDate"></i>
		</div>
		<div class="coach-item">
			<scroll-view class="scroll-view" scroll-x="true" :scroll-left="scrollLeft">
				<ul class="list-coach">
					<li :class="{ 'active': activeCoachIndex == index }" v-for="(item, index) in coachArr" :key="index"
						@click="changeCoachIndex(index)">
						<p class="name">{{ item.userName ? item.userName : '' }}</p>
						<p v-if="item.userName"><span>{{ item.completeCount ? item.completeCount : 0 }}/{{
							item.dateData.length }}</span></p>
					</li>
				</ul>
			</scroll-view>
		</div>
		<div class="time-item">
			<div class="axis-item" v-for="(item, index) in dateTime" :key="index">
				<span class="clock">{{ item }}</span>
				<div v-for="(dataItem, d) in coachArr[activeCoachIndex].dateData" :key="d">
					<div class="axis-data"
						:class="{ 'finish': dataItem.appointmentStatus === 1, 'finish1': dataItem.appointmentStatus === -1 }"
						v-if="setIndexAndStyle(item, dataItem)" @click="goDetail(dataItem)"
						:style="[getItemStyle(dataItem)]">
						<p>{{ dataItem.classTime }}</p>
						<p><span>{{ dataItem.courseName }}</span><em>{{ dataItem.item.memberUserName }}</em></p>
					</div>
				</div>
			</div>
		</div>
		<span class="order-btn" @click="goUrl('/pages/preOrder/preOrderCoach')"
			v-if="userInfo.roleCode != 'FLAGSHIP_STORE_LEADER'">预约</span>
		<navbar title="首页">
			<div class="store-select" v-if="uniToken">
				<picker mode="selector" @change="changeStore" :value="index" :range="shopArr" range-key="storeName"
					:disabled="JSON.parse(role)[0] != 'ADMIN'">
					<i class="hicon-10"></i><span>{{ shopArr[index].storeName }}</span>
				</picker>
			</div>
		</navbar>
		<bottom :activePageIndex="0"></bottom>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import navbar from '@/components/navbar/navbar'
import bottom from '@/components/bottom/bottom'
import { storeGet } from '@/api/manageApi'
import { getStore, setStore } from '@/util/service'
import { coachEnabledGet, appointmentPage, coachVisibleList } from '@/api/manageApi'
import dayjs from 'dayjs'
export default {
	components: {
		navbar,
		bottom
	},
	data() {
		return {
			shopArr: [
				{ storeName: '', id: '' }
			],
			index: 0,
			storeId: '',
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			scrollHeight: 200,
			scrollLeft: 0,
			dateTime: [
				'00:00',
				'00:30',
				'01:00',
				'01:30',
				'02:00',
				'02:30',
				'03:00',
				'03:30',
				'04:00',
				'04:30',
				'05:00',
				'05:30',
				'06:00',
				'06:30',
				'07:00',
				'07:30',
				'08:00',
				'08:30',
				'09:00',
				'09:30',
				'10:00',
				'10:30',
				'11:00',
				'11:30',
				'12:00',
				'12:30',
				'13:00',
				'13:30',
				'14:00',
				'14:30',
				'15:00',
				'15:30',
				'16:00',
				'16:30',
				'17:00',
				'17:30',
				'18:00',
				'18:30',
				'19:00',
				'19:30',
				'20:00',
				'20:30',
				'21:00',
				'21:30',
				'22:00',
				'22:30',
				'23:00',
				'23:30'
			],
			activeIndex: 0,
			weekList: [],
			datePage: 0,
			
			coachArr: [{ dateData: [] }],
			activeCoachIndex: 0
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken', 'role']),
		getItemStyle() {
			return (dataItem) => {
				var start = (new Date(dataItem.startTime)).getTime()
				var end = (new Date(dataItem.endTime)).getTime()
				var minusTime = ((end - start) / (1000 * 60 * 30)).toFixed(1)
				return { 'height': 88 * minusTime + 'rpx' }
			}
		}
	},
	onShow() {
		// uni.hideTabBar({})
		// console.log(JSON.parse(this.role)[0])
	},
	onLoad() {
		this.setWeekList(this.datePage)
		this.getShops()
	},
	methods: {
		goDetail(dataItem) {
			console.log(dataItem)
			var url = '/pagesA/preOrder/preOrderDetail?id=' + dataItem.item.id
			setStore('preOrderDetail', JSON.stringify(dataItem.item))
			this.goUrl(url)
		},
		setIndexAndStyle(item, dataItem) {
			if (dataItem) {
				var dateArr = dataItem.classStartTime.split(':')
				return item == dateArr[0] + ':' + dateArr[1]
			}
		},
		// 获取店铺
		getShops() {
			storeGet('').then(res => {
				// console.log(res)
				if (res.code == '200') {
					var data = res.data
					this.shopArr = data
					if (JSON.parse(this.role)[0] == 'ADMIN') {
						if (getStore('coachStoreId')) {
							this.shopArr.forEach((item, index) => {
								if (item.id == getStore('coachStoreId')) {
									this.index = index
									this.storeId = item.id
								}
							})
						} else {
							this.shopArr.forEach((item, index) => {
								if (item.flagship === 1) {
									this.index = index
									this.storeId = item.id
								}
							})
						}
					} else {
						this.shopArr.forEach((item, index) => {
							if (item.id == this.userInfo.storeId) {
								this.index = index
								this.storeId = item.id
							}
						})
					}
					setStore('coachStoreId', this.storeId)
					this.getCoachList(this.storeId)
					uni.pageScrollTo({
						scrollTop: 500,
						duration: 0
					})
				}
			})
		},
		changeStore(e) {
			this.index = e.detail.value
			this.storeId = this.shopArr[this.index].id
			// console.log(this.storeId)
			setStore('coachStoreId', this.storeId)
			this.getCoachList(this.storeId)
		},
		// 获取教练
		getCoachList(storeId) {
			var params = {
				storeId: storeId
			}
			coachVisibleList(params).then(res => {
				// console.log(res)
				if (res.code == '200') {
					var data = res.data
				
					
					var start = this.weekList[this.activeIndex].format('YYYY-MM-DD') + ' 00:00:00'
					var end = this.weekList[this.activeIndex].format('YYYY-MM-DD') + ' 23:59:59'
					this.getPreOrderList(storeId, start, end, data)
				}
			})
		},
		changeCoachIndex(index) {
			this.activeCoachIndex = index
		},
		getPreOrderList(storeId, start, end, coachArr) {
			var params = {
				current: 1,
				size: 1000,
				end: end,
				ext: {},
				key: '',
				orders: [
					{
						order: 'desc',
						sort: 'createTime'
					}
				],
				// signCourseId: 0,
				start: start,
				storeId: storeId
			}
			appointmentPage(params).then(res => {
				// console.log(res)
				if (res.code == '200') {
					var data = res.data.records
					// console.log(data)
					coachArr.forEach((item, index) => {
						item.dateData = []
					})
					for (var i = 0; i < coachArr.length; i++) {
						coachArr[i].completeCount = 0
						for (var j = 0; j < data.length; j++) {
							if (coachArr[i].id === data[j].coachUserId && data[j].appointmentStatus != 2 && data[j].appointmentStatus != 3) {
								if (data[j].appointmentStatus === 1) {
									coachArr[i].completeCount++
								}
								coachArr[i].dateData.push({
									startTime: data[j].classStartTime,
									endTime: data[j].classEndTime,
									classStartTime: data[j].classStartTime.split(' ')[1],
									classEndTime: data[j].classEndTime.split(' ')[1],
									classTime: data[j].classStartTime.split(' ')[1] + '-' + data[j].classEndTime.split(' ')[1],
									courseName: data[j].courseSnapshotName,
									coachName: data[j].coachUserName,
									appointmentStatus: data[j].appointmentStatus,
									item: data[j]
								})
							}
						}
					}
					this.coachArr = coachArr
					if (this.coachArr.length == 0) {
						this.coachArr = [{ dateData: [] }]
					}
				}
			})
		},
		preDate() {
			this.datePage--
			this.setWeekList(this.datePage)
			this.changeIndex(0)
		},
		nextDate() {
			this.datePage++
			this.setWeekList(this.datePage)
			this.changeIndex(0)
		},
		changeIndex(index) {
			this.activeIndex = index
			this.getCoachList(this.storeId)
		},
		setWeekList(page) {
			var index = 0
			for (let i = page * 7; i <= 6 + page * 7; i++) {
				this.$set(this.weekList, index, dayjs().add(i, 'day'))
				index++
			}
			
		},

		format(item, format) {
			var week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
			if (format == 'd') {
				if (item.format('YYYY-MM-DD') == dayjs().format('YYYY-MM-DD')) {
					return '今天'
				}
				if (item.format('YYYY-MM-DD') == dayjs().add(1, 'day').format('YYYY-MM-DD')) {
					return '明天'
				}
				return week[item.format(format)]
			}
			if (format) {
				return item.format(format)
			}
			return item.format('MM/DD')
		}

	}
}
</script>

<style lang="scss">
.pre-order-home {
	position: relative;
	padding-top: 420rpx;

	.hicon-10 {
		width: 24rpx;
		height: 24rpx;
		display: inline-block;
		position: absolute;
		left: 16rpx;
		top: 12rpx;
		background: url('../../static/tab.png') no-repeat 0 0;
		background-size: cover;
	}

	.store-select {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		z-index: 10;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-indent: 50rpx;
		background: transparent;
		border-radius: 29rpx;
		border: 1px solid #ddd;
		color: #333;
		font-size: 22rpx;
		opacity: 1;

		span {
			width: 100rpx;
			display: inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-indent: 0;
		}
	}

	.pre-item {
		width: 100%;
		height: 132rpx;
		background: #FFFFFF;
		padding: 24rpx 0 24rpx 20rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 164rpx;
		z-index: 10;

		.picon-pre {
			width: 22rpx;
			height: 40rpx;
			background: url('../../static/d9.png') no-repeat 0 0;
			background-size: cover;
			display: inline-block;
			position: absolute;
			left: 27rpx;
			top: 40rpx;
			transform: rotate(180deg);
		}

		.picon-next {
			width: 22rpx;
			height: 40rpx;
			background: url('../../static/d9.png') no-repeat 0 0;
			background-size: cover;
			display: inline-block;
			position: absolute;
			right: 27rpx;
			top: 40rpx;
		}

		.list-date {
			li {
				display: inline-block;
				margin-left: 32rpx;
				width: 60rpx;
				text-align: center;

				p {
					font-size: 24rpx;
					color: #BFBFBF;
					margin-bottom: 14rpx;
				}

				h5 {
					font-size: 20rpx;
					color: #1E1E1E;
					height: 38rpx;
					line-height: 38rpx;
				}
			}

			li:first-child {
				margin-left: 44rpx;
			}

			li.active p {
				color: #FF5A20;
			}

			li.active h5 {
				background: #FF5D3D;
				border-radius: 8rpx;
				color: #FFFFFF;
			}
		}
	}

	.coach-item {
		width: 100%;
		padding: 24rpx 0 24rpx 24rpx;
		position: fixed;
		left: 0;
		top: 280rpx;
		z-index: 10;
		background: #F7F7F7;

		.scroll-view {
			.list-coach {
				display: flex;
				flex-wrap: nowrap;

				li {
					width: 136rpx;
					height: 92rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					flex-shrink: 0;
					text-align: center;
					margin-right: 20rpx;

					.name {
						font-size: 26rpx;
						color: #1E1E1E;
						margin-top: 10rpx;
					}

					span {
						font-size: 22rpx;
						color: #BFBFBF;
					}
				}

				li.active {
					background: #FF5D3D;

					.name,
					span {
						color: #fff !important;
					}
				}
			}
		}
	}

	.time-item {
		background: #fff;
		padding: 37rpx 0 37rpx 83rpx;

		.axis-item {
			width: 100%;
			height: 88rpx;
			border-top: 1px solid #E9E9E9;
			position: relative;

			.clock {
				font-weight: 500;
				font-size: 20rpx;
				color: #575757;
				position: absolute;
				left: -58rpx;
				top: -16rpx;
			}

			.axis-data {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 88*2rpx;
				background: #FFF3EC;
				padding: 16rpx 0rpx 16rpx 25rpx;
				box-sizing: border-box;
				z-index: 9;

				p {
					font-size: 24rpx;
					color: #1E1E1E;
					margin-bottom: 9rpx;
					display: flex;

					span {
						display: inline-block;
						width: 330rpx;
						font-size: 28rpx;
						color: #1E1E1E;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-right: 25rpx;
						vertical-align: middle;
					}

					em {
						font-size: 24rpx;
						color: #575757;
						margin-right: 17rpx;
					}
				}
			}

			.axis-data::after {
				content: '';
				width: 4rpx;
				height: 44rpx;
				background: #FF7935;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -22rpx;
			}

			.finish {
				background: #F7F7F7;
			}

			.finish::after {
				background: #C0C0C0;
			}

			.finish::before {
				content: '';
				width: 84rpx;
				height: 67rpx;
				background: url('../../static/p3.png') no-repeat 0 0;
				background-size: cover;
				position: absolute;
				bottom: 0;
				right: 18rpx;
			}

			.finish1 {
				background: #F7F7F7;
			}

			.finish1::after {
				background: #C0C0C0;
			}

			.finish1::before {
				content: '';
				width: 84rpx;
				height: 67rpx;
				background: url('../../static/order3.png') no-repeat 0 0;
				background-size: cover;
				position: absolute;
				bottom: 0;
				right: 18rpx;
			}
		}
	}

	.order-btn {
		width: 108rpx;
		height: 108rpx;
		background: #FFBF40;
		border-radius: 50%;
		border: 2px solid #FFFFFF;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 108rpx;
		text-align: center;
		position: fixed;
		right: 24rpx;
		bottom: 200rpx;
		z-index: 10;
		outline: 5rpx solid #dfd7c1;
	}
}
</style>
